import type { FormProps } from 'antd'
import { Form, Input, Card, DatePicker } from 'antd';

type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
}

const onFinish: FormProps<FieldType>['onFinish'] = (values)=>{
    console.log('Success:', values);
}

const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
};

function Articles() {
    return <div>
        <Card>
            <Form name="basic" 
            labelCol={{ span:8 }} 
            wrapperCol={{ span: 16 }} 
            style={{maxWidth:600}} 
            initialValues={{ remember: true }} 
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off" >

                <Form.Item<FieldType> 
                    label="文章标题" 
                    name="username"
                    rules={[{required: true, message:'Please input your username!'}]}
                >
                    <Input />
                </Form.Item>
                <Form.Item label="发布时间" name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
                    <DatePicker />
                </Form.Item>
            </Form>
        </Card>
    </div>
}

export default Articles